<template>
  <div>
    <header class="header">
      <el-row class="row-bg">
        <el-col :span="15" class="col-bg">
          <el-row type="flex" justify="start" align="middle" class="col-bg">
            <div class="header-logo">
              <img
                width="80%"
                height="80%"
                src="../assets/logo.png"
                alt=""
                @click="goIndex"
              />
            </div>
            <div class="header-search">
              <el-input
                placeholder="想搜索什么呢？"
                suffix-icon="el-icon-search"
                v-model="searchValue"
              >
              </el-input>
            </div>
          </el-row>
        </el-col>
        <el-col :span="7" offset="0">
          <el-row type="flex" align="center">
            <div class="music-site">
              <aplayer
                listMaxHeight="50"
                :listFolded="true"
                autoplay
                :list="songList"
                :music="{
                  title: 'secret base~君がくれたもの~',
                  artist: 'Silent Siren',
                  src: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
                  pic: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg',
                }"
              />
            </div>
            <div class="header-other"></div>
          </el-row>
        </el-col>
      </el-row>
    </header>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer';
export default {
  components: {
    Aplayer,
  },
  data() {
    return {
      searchValue: '',
      songList: ['test'],
    };
  },
  methods: {
    goIndex() {
      this.$router.push('/blog');
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 76px;
  .row-bg {
    background: url('../assets/header-bg.jpg');
    background-size: cover;
    height: 100%;
  }
  .col-bg {
    height: 100%;
  }
  .header-logo {
    padding-left: 20px;
    img {
      padding: 5px;
    }
  }
  .header-search {
    /deep/ .el-input__inner {
      height: 40px;
      border-radius: 50px;
    }
  }
}

/deep/ .el-input__icon {
  color: #000;
}
</style>
